<template>
  <div class="user-log-wrapper">
    <div class="hover"></div>

    <user-login-card
      class="user-login-card"
      :class="{ backFace: state !== 'log' }"
      @toReg="toReg"
      @toFindpwd="toFindpwd"
      @exit="$emit('exit')"
    ></user-login-card>

    <user-regis-card
      class="user-regis-card"
      :class="{ backFace: state !== 'reg' }"
      ref="regisCard"
      @toLog="toLog"
      @exit="$emit('exit')"
    ></user-regis-card>

    <user-findpwd
      class="user-findpwd"
      :class="{ backFace: state !== 'find' }"
      ref="findpwd"
      @exit="$emit('exit')"
      @toLog="toLog"
    />
  </div>
</template>

<script lang="ts" setup>
import UserLoginCard from '../UserLogCom/UserLoginCard.vue'
import UserRegisCard from '../UserLogCom/UserRegisCard.vue'
import UserFindpwd from '../UserLogCom/UserFindpwd.vue'
import { ref, Ref } from 'vue'

let state = ref('log')

let regisCard: Ref<any | null> = ref(null)
function toReg() {
  state.value = 'reg'
  let com = regisCard.value as any
  com.loadVeriImg()
}

function toLog() {
  state.value = 'log'
}

function toFindpwd() {
  state.value = 'find'
}
</script>

<style scoped lang="scss">
$w: 28vw;

.user-log-wrapper {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hover {
  width: 100vw;
  height: 200vw;
  position: fixed;
  background-color: var(--dark);
}

.user-login-card,
.user-regis-card,
.user-findpwd {
  position: absolute;
  transition: 0.3s;
  backface-visibility: hidden;
}

.user-login-card {
  --userLoginCardWidth: $w;
}

.user-regis-card {
  --userRegisCardWidth: $w;
}

.user-findpwd {
  --userFindpwdWidth: $w;
}
</style>
